<template>
    <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline" @keyup.enter.native="search()">
            <!-- <el-form-item label="活动编码">
              <br> <br>
                <el-input style="margin-left:-70px;width:200px" v-model="formInline.activityCode" placeholder></el-input>
            </el-form-item> -->
         
          
            <el-form-item label="活动名称">
              <br> <br>
                <el-input style="margin-left:-70px;width:200px" v-model="formInline.activityName" placeholder></el-input>
            </el-form-item>
               <el-form-item label="发布状态">
              <br> <br>
                <el-select style="margin-left:-70px;width:200px" v-model="formInline.status">
                    <el-option label="全部" value></el-option>
                    <el-option label="已发布" value="1"></el-option>
                    <el-option label="未发布" value="0"></el-option>
                </el-select>
            </el-form-item>
            <!-- <el-form-item label="开展状态">
              <br> <br>
                <el-select style="margin-left:-70px;width:200px" v-model="formInline.runStatus">
                    <el-option label="全部" value></el-option>
                    <el-option label="未开始" value="1"></el-option>
                    <el-option label="进行中" value="2"></el-option>
                    <el-option label="已结束" value="3"></el-option>
                </el-select>
            </el-form-item> 
            <br/> -->
            <el-form-item label="活动时间">
              <br> <br>
              <el-date-picker
               style="margin-left:-70px;width:405px"
                v-model="formInline.runTimeRange"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
              ></el-date-picker>
            </el-form-item>
              <!-- <el-form-item label="创建时间">
              <br> <br>
              <el-date-picker
               style="margin-left:-70px;width:410px"
                v-model="formInline.createTimeRange"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions"
              ></el-date-picker>
            </el-form-item> -->
            <div style="width:100%;display:flex;justify-content:flex-end;">
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="search()" size="mini">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="kong()" size="mini" icon="el-icon-delete">重置</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="toAdd()" icon="el-icon-edit" size="mini">新增</el-button>
            </el-form-item>
            </div>
            
        </el-form>

        <el-table
            :data="tableData"
            v-loading="loading"
            border
            height="400px"
            style="width: 100%;"
            :header-cell-style="{background:'#ebecf0',color:'#606266'}"
        >
            <el-table-column type="index" width="60" label="序号" align="center" ></el-table-column>
            <el-table-column 
              v-for="(item, index) in col" 
              :key="`col_${index}`" 
              :prop="dropCol[index].prop" 
              :width="dropCol[index].width"
              :label="item.label"
              align="center"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <div v-if="dropCol[index].prop === 'status'">
                  <span v-if="scope.row.status == '0'">未发布</span>
                  <span v-if="scope.row.status == '1'">已发布</span>
                </div>
                <div v-if="dropCol[index].prop === 'yxq'">
                  <span v-if="scope.row.beginDate != null">
                    {{scope.row.beginDate.toString().substr(0,10) + " 至 " + scope.row.endDate.toString().substr(0,10)}}
                  </span>
                  <span v-if="scope.row.beginDate == null">—</span>
                </div>
                <div v-if="dropCol[index].prop != 'status' && dropCol[index].prop != 'yxq'">
                  {{scope.row[dropCol[index].prop]}}
                </div>
              </template>
            </el-table-column>
            <!--
            <el-table-column
                prop="activityCode"
                label="买赠活动编码"
                align="center"
                width="150"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                prop="activityName"
                label="买赠活动名称"
                header-align="center"
                width="200"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column
                prop="remark"
                label="活动描述"
                header-align="center"
                align="left"
                width="250" 
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column label="发布状态" align="center" width="150">
                <template slot-scope="scope">
                    <span v-if="scope.row.status == '0'">未发布</span>
                    <span v-if="scope.row.status == '1'">已发布</span>
                </template>
            </el-table-column>
            <el-table-column label="开展状态" align="center" width="150">
                <template slot-scope="scope">
                    <span v-if="scope.row.type == '1'">未开始</span>
                    <span v-if="scope.row.type == '2'">进行中</span>
                    <span v-if="scope.row.type == '3'">已结束</span>
                </template>
            </el-table-column>
            <el-table-column label="有效期" align="center" width="250" :formatter="dateRange"></el-table-column>
            <el-table-column
                prop="createTime"
                label="创建时间"
                align="center"
                width="150"
            ></el-table-column>
            <el-table-column prop="createUserName" label="创建人" align="center" width="120"></el-table-column>
            -->
            <el-table-column
                label="操作"
                width="200"
                align="center"
                header-align="center"
                fixed="right"
            >
                <template slot-scope="scope">
                    <div style="width:120px;text-align:left;margin:0 auto">
                      <el-button type="text" @click="toDetail(scope.row)" v-if="scope.row.status == 1">查看</el-button>
                      <el-button type="text" @click="toEdit(scope.row)" v-if="scope.row.status == 0">编辑</el-button>
                      <el-button type="text" @click="updateGoodsActivityStatus(scope.row.uuid, '1')" v-if="scope.row.status == 0">发布</el-button>
                      <el-button type="text" @click="updateGoodsActivityStatus(scope.row.uuid, '0')" v-if="scope.row.status == 1">撤回</el-button>
                      <!-- <el-button type="text" @click="deleteGoodsActivity(scope.row.uuid)" v-if="scope.row.status == '0'">删除</el-button> -->
                    </div>
                </template>
            </el-table-column>
        </el-table>

        <div class="block" style="margin-top:5px;">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[10, 20, 30, 50, 100, 150, 200]"
                :current-page="listQuery.current"
                :page-size="listQuery.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            ></el-pagination>
        </div>

        
    </div>
</template>

<script>
import Sortable from 'sortablejs';
import {
  qrySpecialActivityList,
  saveSpecialActivityConfig,
  deleteGoodsActivity
} from "@/api/giftActivity";

const curDateStr = function (){
  var curDate = new Date();
  var year = curDate.getFullYear();
  var month = curDate.getMonth() + 1;
  month = month > 9 ? month : "0" + month;
  var date = curDate.getDate();
  date = date > 9 ? date : "0" + date;
  return year + "-" + month + "-" + date;
}

export default {
  data() {
    return {
      loading: true,
      uuid: "",
      col: [
        {
          label: "买赠活动名称",
          prop: "activityName",
          width: "250"
        },
        
        {
          label: "发布状态",
          prop: "status",
          width: "150"
        },
        {
          label: "活动时间",
          prop: "yxq",
          width: "300"
        },
        {
          label: "活动描述",
          prop: "remark",
          width: "500"
        },
        // {
        //   label: "创建时间",
        //   prop: "createTime",
        //   width: "150"
        // },
        // {
        //   label: "创建人",
        //   prop: "createUser",
        //   width: "120"
        // }
      ],
      dropCol: [
        {
          label: "买赠活动名称",
          prop: "activityName",
          width: "250"
        },
        
        {
          label: "发布状态",
          prop: "status",
          width: "150"
        },
        {
          label: "活动时间",
          prop: "yxq",
          width: "300"
        },
        {
          label: "活动描述",
          prop: "remark",
          width: "500"
        },
        // {
        //   label: "创建时间",
        //   prop: "createTime",
        //   width: "150"
        // },
        // {
        //   label: "创建人",
        //   prop: "createUser",
        //   width: "120"
        // }
      ],
      formInline: {
        activityCode: "",
        activityName: "",
        status: "",
        runStatus: "",
        runTimeRange: "",
        createTimeRange: ""
      },
      total: 0,
      listQuery: {
        current: 1,
        size: 100
      },
      tableData: [],//活动列表
      pickerOptions: {
        shortcuts: [
          {
            text: "最近3天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      
    };
  },
  mounted() {
    this.queryGoodsActivityList();

    document.body.ondrop = function(event) {
      event.preventDefault();
      event.stopPropagation();
    };
    // this.rowDrop()
    this.columnDrop();
  },
  methods: {
    //拖拽列表
    columnDrop() {
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr');
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: evt => {
          const oldItem = this.dropCol[evt.oldIndex-1];
          this.dropCol.splice(evt.oldIndex-1, 1);
          this.dropCol.splice(evt.newIndex-1, 0, oldItem);
        }
      });
    },
    //活动列表
    queryGoodsActivityList() {
      let beginCreateTime = null;
      let endCreateTime = null;
      if(this.formInline.createTimeRange != null && this.formInline.createTimeRange.length == 2){
        beginCreateTime = this.formInline.createTimeRange[0];
        endCreateTime = this.formInline.createTimeRange[1];
      }
      let beginDate = null;
      let endDate = null;
      if(this.formInline.runTimeRange != null && this.formInline.runTimeRange.length == 2){
        beginDate = this.formInline.runTimeRange[0];
        endDate = this.formInline.runTimeRange[1];
      }
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          activityCode: this.formInline.activityCode.trim(),
          activityName: this.formInline.activityName.trim(),
          status: this.formInline.status,
          beginCreateTime: beginCreateTime,
          endCreateTime: endCreateTime,
          type: this.formInline.runStatus,
          beginDate: beginDate,
          endDate: endDate
        },
        ascs: [],
        descs: []
      };
      qrySpecialActivityList(data).then(res => {
        this.loading = false;
        this.tableData = res.records;
        this.total = res.total;
      });
    },
    fixData(row, column, cellValue, index) {
      if (cellValue == null || cellValue == "") return "";
      return cellValue.substring(0, 10);
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.queryGoodsActivityList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.queryGoodsActivityList();
    },
    //查询
    search() {
      this.listQuery.current = 1;
      this.queryGoodsActivityList();
    },
    //清空
    kong() {
      this.formInline.activityCode = "";
      this.formInline.activityName = "",
      this.formInline.status = "";
      this.formInline.runStatus = "";
      this.formInline.runTimeRange = "";
      this.formInline.createTimeRange = "";
    },
    //添加活动
    toAdd() {
      this.$router.push({
        name: "addBonusPointActivityDetail",
        params: {}
      });
    },
    //查看活动
    toDetail(item) {
      this.$router.push({
        name: "addBonusPointActivityDetail",
        params: {
          edit: item,
          flag: true
        }
      });
    },
    //编辑活动
    toEdit(item) {
      this.$router.push({
        name: "addBonusPointActivityDetail",
        params: {
          edit: item,
          flag: false
        }
      });
    },
    updateGoodsActivityStatus(uuid, status) {
      var msg = "";
      if (status == "1") {
        msg = "发布";
      } else if (status == "0") {
        msg = "撤回";
      }
      this.$confirm("确定" + msg + "当前活动吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let data = {
            uuid: uuid,
            status: status
          };
          saveSpecialActivityConfig(data).then(res => {
            if (res.code == "1") {
              this.$message({
                showClose: true,
                message: msg + "成功",
                type: "success"
              });
              this.queryGoodsActivityList();
            } else {
              this.$message({
                showClose: true,
                message: res.message,
                type: "error"
              });
            }
            this.loading = false;
          });
        })
        .catch(() => {});
    },
    deleteGoodsActivity(uuid, status) {
      this.$confirm("确定删除当前活动吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let data = {
            uuid: uuid,
            status: status
          };
          deleteGoodsActivity(data).then(res => {
            if (res.code == "1") {
              this.$message({
                showClose: true,
                message: "删除成功",
                type: "success"
              });
              this.queryGoodsActivityList();
            } else {
              this.$message.error("删除失败");
            }
            this.loading = false;
          });
        })
        .catch(() => {});
    },
    //数字格式化
    dateRange(row, column, cellValue, index) {
      if (row.beginDate != null && row.beginDate.toString().length >= 10) {
        return row.beginDate.toString().substr(0,10) + " — " + row.endDate.toString().substr(0,10)
      } else {
        return "—";
      }
    },
  },
  beforeRouteLeave(to, from, next) {
    // 设置下一个路由的 meta
    to.meta.keepAlive = false; // C 跳转到 A 时让 A 不缓存，即刷新
    next();
  },
  
};
</script>
<style lang="less" scoped>

</style>
